<div class="modal-header">
    <h3 class="modal-title"><b style="color: #286090">开通ECS</b></h3>
</div>
<div class="modal-body">
    <div style="margin-top: 5px;" ng-show="templateConfig == 1">
        <table class="table table-hover table-bordered table-striped">
            <h4 class="modal-title">ECS模版</h4>
            <thead>
            <tr>
                <td>区域ID</td>
                <td>名称</td>
                <td>网络类型</td>
                <td>cpu</td>
                <td>memory</td>
                <td>IO优化实例</td>
                <td>系统盘类型</td>
                <td>数据盘类型</td>
                <td ng-if="contains(authPoint, '/server/save')">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{template.zoneId}}</td>
                <td>{{template.name}}</td>
                <td>
                    <b style="color: #449d44" ng-if="template.networkSupport == 0">经典</b>
                    <b style="color: #286090" ng-if="template.networkSupport == 1">全部</b>
                    <b style="color: #d9534f" ng-if="template.networkSupport == 2">VPC</b>
                </td>
                <td>{{template.cpu}}</td>
                <td>
                    <span ng-if="template.memory < 8">{{template.memory}}GB</span>
                    <b style="color: #449d44" ng-if="template.memory >= 8">{{template.memory}}GB</b>
                </td>
                <td>
                    <b style="color: #449d44" ng-if="template.ioOptimized == 'optimized'">是</b>
                    <span ng-if="template.ioOptimized == 'none'">否</span>
                </td>
                <td>
                    <span ng-if="template.systemDiskCategory == 'cloud'">普通云盘</span>
                    <b style="color: green" ng-if="template.systemDiskCategory == 'cloud_efficiency'">高效云盘</b>
                    <b style="color: #d9534f" ng-if="template.systemDiskCategory == 'ephemeral_ssd'">本地SSD盘</b>
                    <b style="color: #d99a53" ng-if="template.systemDiskCategory == 'cloud_ssd'">SSD云盘</b>
                </td>
                <td>
                    <span ng-if="template.dataDisk1Category == 'cloud'">普通云盘</span>
                    <b style="color: green" ng-if="template.dataDisk1Category == 'cloud_efficiency'">高效云盘</b>
                    <b style="color: #d9534f" ng-if="template.dataDisk1Category == 'ephemeral_ssd'">本地SSD盘</b>
                    <b style="color: #d99a53" ng-if="template.dataDisk1Category == 'cloud_ssd'">SSD云盘</b>
                </td>
            </tr>
            </tbody>
            <tfoot>
        </table>
    </div>

    <form class="bs-example form-horizontal" ng-show="templateConfig == 1"
          style="box-shadow: 0 0 5px #ddd;padding: 10px;">
        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>服务器组名称</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowServerGroup.selected" theme="bootstrap"
                               ng-change="changeServerGroup(nowServerGroup.selected)">
                        <ui-select-match placeholder="搜索服务器组名称......">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices refresh="queryServerGroup($select.search)" refresh-dalay="0"
                                           repeat="item in serverGroupList | filter: $select.search">
                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="col-md-6">
                <label class="col-lg-4 control-label">服务器名称</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="服务器名称" required
                           ng-model="templateItem.serverVO.serverName">
                </div>
            </div>
        </div>

        <div class="form-group" ng-show="nowServerGroup.selected != null && nowServerGroup.selected.label.size != 0">
            <div class="col-md-12">
                <label class="col-md-2 control-label">LABEL</label>
                <div class="col-md-10" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                    <div class="col-md-6" ng-repeat="label in nowServerGroup.selected.label">
                         <span class="label" style="color: white; background-color: #00a8f3 ;"
                               uib-popover-html="label.proDesc" popover-trigger="'mouseenter'">{{label.proName}}</span>
                        <span class="label" style="color: white; background-color: #20a03f ;">{{label.proValue}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>登录类型</label>
                <div class="col-lg-8">
                    <select class="form-control" ng-model="templateItem.serverVO.loginType"
                            ng-options="logItem.code as logItem.name for logItem in logType" required>
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <label class="col-lg-4 control-label">登录用户</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="登录用户"
                           ng-model="templateItem.serverVO.loginUser">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>环境类型</label>
                <div class="col-lg-8">
                    <select class="form-control" ng-model="templateItem.serverVO.envType"
                            ng-options="envItem.code as envItem.name for envItem in envType" required>
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>镜像</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowImage.selected" theme="bootstrap">
                        <ui-select-match placeholder="镜像名称......">{{$select.selected.imageName}}</ui-select-match>
                        <ui-select-choices refresh="queryImage($select.search)" refresh-dalay="0"
                                           repeat="item in imageList | filter: $select.search">
                            <div ng-bind-html="item.imageName | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>是否开通公网</label>

                <div class="checkbox col-lg-8">
                    <label>
                        <input type="checkbox" ng-model="templateItem.allocatePublicIpAddress"><b
                            style="color: #286090">开通公网IP</b>
                    </label>
                </div>
            </div>
            <div class="col-md-6" ng-show="templateItem.allocatePublicIpAddress == true">
                <label class="col-lg-4 control-label">公网网段</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowPublicGroup.selected" theme="bootstrap">
                        <ui-select-match placeholder="搜索公网IP段名称......">{{$select.selected.ipNetwork}}
                        </ui-select-match>
                        <ui-select-choices refresh="queryPublicIPGroup($select.search)" refresh-dalay="0"
                                           repeat="item in publicGroupList | filter: $select.search">
                            <div ng-bind-html="item.ipNetwork | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">内网网段</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowInternalGroup.selected" theme="bootstrap">
                        <ui-select-match placeholder="搜索内网IP组名称......">{{$select.selected.ipNetwork}}
                        </ui-select-match>
                        <ui-select-choices refresh="queryInternalIPGroup($select.search)" refresh-dalay="0"
                                           repeat="item in internalGroupList | filter: $select.search">
                            <div ng-bind-html="item.ipNetwork | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">系统盘(GB)</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control"
                           uib-popover-html="'系统盘容量必须大于镜像容量'" popover-trigger="'mouseenter'"
                           placeholder="系统盘容量必须大于镜像容量（输入0则按阿里云默认40G创建）"
                           ng-model="templateItem.systemDiskSize">
                </div>
            </div>
            <div class="col-md-6">
                <label class="col-lg-4 control-label">数据盘(GB)</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="数据盘容量（输入0不创建数据盘）"
                           ng-model="templateItem.dataDiskSize">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">服务器数量</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="服务器数量" ng-model="templateItem.cnt">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">付费类型</label>
                <div class="col-lg-8">
                    <div class="input-group">
                        <label class="radio-inline">
                            <input type="radio" ng-model="templateItem.chargeType" value="PostPaid" ng-checked="false">
                            <b style="margin-left: 5px; color: #286090">按量</b>
                        </label>
                        <label class="radio-inline" style="margin-left: 50px;">
                            <input type="radio" ng-model="templateItem.chargeType" value="PrePaid" ng-checked="true">
                            <b style="margin-left: 5px; color: #286090">包月</b>
                        </label>
                    </div>
                </div>
            </div>

            <div class="col-md-6" ng-show="templateItem.chargeType == 'PrePaid'">
                <label class="col-lg-4 control-label">包月时长</label>
                <div class="col-lg-8">

                    <input type="text" class="form-control" placeholder="包月可选1-9,12,24,36"
                           ng-model="templateItem.period">

                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">网络类型</label>
                <div class="col-lg-8">
                    <select class="form-control" ng-model="nowNetwork.selected" ng-change="changeNetwork()"
                            ng-options="network.networkType as network.networkDesc for network in networkList" required>
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6" ng-show="nowNetwork.selected == 'vpc'">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>VPC网络</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowVpc.selected" theme="bootstrap" ng-change="changeVpc()">
                        <ui-select-match placeholder="搜索VPC名称......">{{$select.selected.vpcDesc}}</ui-select-match>
                        <ui-select-choices refresh="queryVpc($select.search)" refresh-dalay="0"
                                           repeat="item in vpcList | filter: $select.search">
                            <div ng-bind-html="item.vpcDesc | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>

        <div class="form-group" ng-show="nowNetwork.selected == 'vpc'">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>虚拟交换机</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowVswitch.selected" theme="bootstrap">
                        <ui-select-match placeholder="搜索虚拟交换机名称......">{{$select.selected.vswitchDesc}}
                        </ui-select-match>
                        <ui-select-choices refresh="queryVswitch($select.search)" refresh-dalay="0"
                                           repeat="item in vswitchList | filter: $select.search">
                            <div ng-bind-html="item.vswitchDesc | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>

            <div class="col-md-6" style="margin-top:5px;"
                 ng-show="nowVswitch.selected != null && nowVswitch.selected.vSwitch != null">
                <span class="label" style="color: white; background-color: #00a8f3 ;">
                    网段:{{nowVswitch.selected.vSwitch.cidrBlock}}(可用IP:{{nowVswitch.selected.vSwitch.availableIpAddressCount}})
                </span>
            </div>

        </div>

        <div class="form-group" ng-show="nowNetwork.selected == 'vpc'">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>安全组</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowSecurityGroup.selected" theme="bootstrap">
                        <ui-select-match placeholder="搜索安全组名称......">{{$select.selected.securityGroupDesc}}
                        </ui-select-match>
                        <ui-select-choices refresh="querySecurityGroup($select.search)" refresh-dalay="0"
                                           repeat="item in securityGroupList | filter: $select.search">
                            <div ng-bind-html="item.securityGroupDesc | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>

    </form>

    <div style="margin-top: 5px;" ng-show="templateConfig == 0">
        <div class="form-group" ng-show="ecsTaskVO != null && ecsTaskVO.cnt != null">
            <label class="control-label">进度</label>
            <span class="progress-bar" role="progressbar"
                  uib-popover-html="'任务进度'" popover-trigger="'mouseenter'"
                  aria-valuenow="ecsTaskVO.serverCnt" aria-valuemin="0"
                  aria-valuemax="ecsTaskVO.cnt"
                  style="min-width: 2em; background-color: green; width: {{ecsTaskVO.serverCnt / ecsTaskVO.cnt * 100}}%;">
             <b>{{ecsTaskVO.serverCnt / ecsTaskVO.cnt * 100}}%</b>
         </span>
        </div>

        <table class="table table-hover table-bordered table-striped">
            <thead>
            <tr>
                <td>instanceId</td>
                <td>名称</td>
                <td>公网IP</td>
                <td>内网IP</td>
                <td ng-if="contains(authPoint, '/server/power')">操作</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in ecsTaskVO.serverList">
                <td>{{item.instanceId}}</td>
                <td>{{item.serverName}}</td>
                <td>{{item.publicIp}}</td>
                <td>{{item.insideIp}}</td>
                <td ng-if="contains(authPoint, '/server/power')">
                    <b class="glyphicon glyphicon-off pull-right" ng-click="powerOnServer(item.id)">
                    </b>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="form-group" style="margin-top: 5px;">
        <div style="text-align:center;">

            <button ng-click="createServer()" ng-disabled="butCreatingEcs" ng-show="templateConfig == 1"
                    class="btn btn-xs"
                    uib-popover-html="'开通ECS服务器'" popover-trigger="'mouseenter'"
                    style="margin-left: 5px; background-color: #ff5f87; color: white;">
                <span class="fa fa-spin fa-spinner" ng-show="butCreatingEcs"></span>
                <span class="fa fa-circle-o-notch" ng-show="!butCreatingEcs"></span>开通ECS
            </button>

            <button class="btn btn-xs"
                    style="background-color: #ff8700; color: white;"
                    ng-click="closeModal()">关闭
            </button>


        </div>
    </div>

    <div ng-if="alert.type != ''">
        <div uib-alert ng-class="'alert-' + alert.type" close="closeAlert()">{{alert.msg}}</div>
    </div>
</div>